import React from 'react';
import { StyleSheet, Platform } from 'react-native';
import { View } from '../Themed';
import { LineChart } from 'react-native-chart-kit';
import { Dimensions } from 'react-native';

export default function ChartsModule() {
  // 获取屏幕宽度，设置图表宽度为屏幕宽度减去一些边距
  const screenWidth = Dimensions.get('window').width - 40;

  const chartData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        data: [20, 45, 28, 80, 99, 43],
        color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`, // 可选
        strokeWidth: 2, // 可选
      },
    ],
  };

  const chartConfig = {
    backgroundGradientFrom: '#1E2923',
    backgroundGradientFromOpacity: 0,
    backgroundGradientTo: '#08130D',
    backgroundGradientToOpacity: 0.5,
    color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
    strokeWidth: 2,
    barPercentage: 0.5,
    useShadowColorFromDataset: false,
    propsForDots: {
      r: '6',
      strokeWidth: '2',
      stroke: '#ffa726',
    },
    // Web端特别处理
    style: {
      borderRadius: 16,
    },
    // 禁用响应器属性，防止在Web端出现警告
    withResponsiveness: Platform.OS !== 'web',
    withInnerLines: true,
    withOuterLines: true,
  };

  // 针对不同平台返回不同的组件
  return (
    <View style={styles.chartWrap}>
      {Platform.OS === 'web' ? (
        <div style={{ width: screenWidth, height: 220 }}>
          <LineChart
            data={chartData}
            width={screenWidth}
            height={220}
            chartConfig={chartConfig}
            bezier
            style={{
              marginVertical: 8,
              borderRadius: 16,
            }}
          />
        </div>
      ) : (
        <LineChart
          data={chartData}
          width={screenWidth}
          height={220}
          chartConfig={chartConfig}
          bezier
          style={{
            marginVertical: 8,
            borderRadius: 16,
          }}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  chartWrap: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
